<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
  <!-- <link rel="stylesheet" href="stylesheets/reset.css"> -->
  <!-- <link rel="stylesheet" href="stylesheets/index.css"> -->
</head>
<body>
<!-- angular   ngIf 
 wx:if=
 双向数据绑定: mvvm
 m -> v
 v -> m   v-model
 数据层修改 -> 视图层修改
 view -> model
 -->

<div id="app">
	<h1 v-if="seen" v-bind:title="msg">{{ msg }}</h1>
	<!-- <input v-model="msg"> -->
	<!-- <input :value="msg" v-on:input="handleChange"> -->
	<!-- <button v-on:click="seen = !seen">toggle h1</button> -->
	<button v-on:click="toggleH1">toggle h1</button>
	<button v-on:click="toggleH1()">toggle h1</button>
	<hr>
	<div>
		<input type="text" v-model="todoText">
		<button v-on:click="add">Add # {{ todos.length + 1 }}</button>
	</div>
	<ul>
		<!-- <li v-for="item in todos">{{ item.text }}</li> -->
		<li v-for="item of todos">{{ item.text }}</li>
	</ul>
</div>
<script src="./vue.js"></script>
<script>
	const app = new Vue({
		el: "#app",
		data: {
			msg: "hello vue",
			seen: true,
			todos: [
			  { text: '学习 JavaScript' },
			  { text: '学习 Vue' },
			  { text: '整个牛项目' }
			],
			todoText: ""
		},
		methods: {
			add() {
				if(!this.todoText) {
					return
				}
				this.todos.push({
					text: this.todoText,
				})
				this.todoText = ""
				// console.log(this.todoText)
			},
			handleChange(event) {
				// console.log(event.target.value)
				this.msg = event.target.value
			},
			toggleH1() {
				this.seen = !this.seen
				console.log(Date.now())
				// console.log(this)
			}
		}
	})

</script>

</body>
</html>
